<template>
  <el-col :span="12">
    <div style="height: 290px;padding: 13px;box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);border-radius: 5px">
      <div ref="countChart" style="width: 100%;height: 100%" />
    </div>
  </el-col>
</template>

<script>
import * as echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import resize from '@/components/Mixins/resize'
import { listSolarUserDayPowerHistory } from '@/views/Solar/api/solarPowerDeviceHistory'
import {
  formatDate
} from '@/util/common'

export default {
  name: 'PowerCount',
  mixins: [resize],
  data() {
    return {
      chart: null,
      startDate: ''
    }
  },
  mounted() {
    this.startDate = new Date().getTime() - 10 * 24 * 60 * 60 * 1000
    this.listSolarUserDayPowerHistory()
  },
  methods: {
    listSolarUserDayPowerHistory() {
      listSolarUserDayPowerHistory({
        startDate: Math.round(this.startDate / 1000)
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.showChart(data)
        } else {
          this.showChart([])
        }
      })
    },
    showChart(res) {
      const inputPowerData = []
      const outputPowerData = []
      const date = []
      for (const i of res) {
        inputPowerData.push(i.inputPower)
        outputPowerData.push(i.outputPower)
        date.push(formatDate(this, i.timestamp))
      }
      this.chart = echarts.init(this.$refs.countChart, 'macarons')
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#FFF',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        title: {
          text: this.$t('surplusCount')
        },
        toolbox: {
          left: 'right',
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            }
            // restore: {},
            // saveAsImage: {}
          }
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '8%'
          // containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: date,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            show: false
          }
        ],
        legend: {
          data: [
            this.$t('input'),
            this.$t('output')
          ]
        },
        series: [
          {
            name: this.$t('input'),
            type: 'bar',
            data: inputPowerData,
            barBorderRadius: 30,
            itemStyle: {
              normal: {
                label: {
                  formatter(params) {
                    return params.value + 'Wh'
                  },
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#909399'
                  }
                }
              }
            }
          },
          {
            name: this.$t('output'),
            type: 'bar',
            data: outputPowerData,
            barBorderRadius: 30,
            itemStyle: {
              normal: {
                label: {
                  formatter(params) {
                    return params.value + 'Wh'
                  },
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#909399'
                  }
                }
              }
            }
          }
        ]
      })
    }
  }
}
</script>


